<script setup lang="ts">
import { ref, watch } from 'vue';
import CssConfig from './components/CssConfig.vue';
import { Cssable } from './models/cssable';
import ClipboardJS from 'clipboard'

new ClipboardJS(".exportBtn")

const preview = ref<string>("<h1>你好</h1>\n<p>欢迎试用css生成器</p>");
const styles = ref<string>();
const exportContent = ref<string>();
const p = ref<Cssable>(new Cssable("p"));
const h1 = ref<Cssable>(new Cssable("h1"));
const data = [p,h1]

var timer = 0;
//监听data对象的变化，一旦发生变化执行第二个参数
watch(data,(d,_)=>{
  //清理定时器，确保用户停止输入后一段时间才会更新
  window.clearTimeout(timer);
  timer = setTimeout(()=>{
    var previewStyle = "";
    var exportStyle = "";
    d.forEach(c=>{
      const style = c.toCss();
      previewStyle += Cssable.toPreviewCss(style);
      exportStyle += style;
    })
    styles.value = `<style>${previewStyle}</style>`;
    exportContent.value = `<style>${exportStyle}</style>`;
    console.log("已更新预览样式")
  },200)
  //刷新阈值时长（毫秒）
},{deep:true})

const notice = ref<string>();
const noticeShow = ref<boolean>(false);
var noticeTimer = 0;
function showNotice(){
  if(exportContent.value){
    notice.value = "已复制到您的剪切板";
  }else{
    notice.value = "当前为默认样式，无可导出内容"
  }
  noticeShow.value = true;
  window.clearTimeout(noticeTimer);
  window.setTimeout(()=>noticeShow.value=false,1000);
}
</script>

<template>
  <div class="main">
    <div class="previewArea">
      <textarea v-model="preview" class="preview"></textarea>
      <div v-html="preview" class="preview">
      </div>
      <div v-html="styles" style="display: none;"></div>
    </div>
    <div class="configArea">
      <CssConfig :obj="p">段落</CssConfig>
      <CssConfig :obj="h1">标题</CssConfig>
    </div>
    <div @click="showNotice" :data-clipboard-text="exportContent" class="exportBtn">
      导出
    </div>
    <div v-show="noticeShow" class="notice">
      {{ notice }}
    </div>
  </div>
</template>

<style scoped>
textarea.preview{
  width: 50%;
  padding: 5px;
  background-color: black;
  color:white;
  font-size: 16px;
  line-height: 20px;
  word-break: break-all;
  overflow-y:scroll;
  overflow-x: hidden;
}
div.preview{
  width: 50%;
  padding: 5px;
  font-size: 16px;
  word-break: break-all;
  overflow-y:scroll;
  overflow-x: hidden;
}
.configArea{
  height: 80vh;
}
.previewArea{
  width: 100%;
  height: 50vh;
  display: flex;
  flex-wrap: nowrap;
  flex:1 1 1;
}
.exportBtn{
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 1000px;
  border: 2px solid white;
  background-color: cornflowerblue;
  box-shadow: 0 0 10px black;
  text-align: center;
  line-height: 40px;
  color:white;
  cursor: pointer;
  user-select: none;
}
.notice{
  position: fixed;
  width: 200px;
  height: 30px;
  line-height: 30px;/*让字上下居中*/
  bottom: 50px;
  margin: auto;
  left: 0px;
  right: 0px;/*margin:auto可以让左右自动居中*/
  background-color: rgba(0,0,0, 0.3);
  color:white;
  text-align: center;
}
.main{
  max-width: 1000px;
  margin: auto;
  height: 100vh;
  padding: 0px;
  display: flex;
  flex-direction: column;
  flex:1 1 1;
  position: relative;;
}
</style>